import React from 'react';
import ReactDOM from 'react-dom';
import List from './components/list'
import Input from './components/input'
class App extends React.Component {
    state = {
      todo:'',
      list:[]
    }
    change=(e)=>{
      this.setState({
        todo:e.target.value
      })
    }
    submit = ()=>{
      // this.state.list.unshift(this.state.todo)
      this.setState({
        list:this.state.list.concat(this.state.todo)
      });
      this.state.todo = '';
      console.log(this.state.list)
    }
    del = (n)=>{
      this.state.list.splice(n,1);
      this.setState({});
    }
    render() {
        let {todo,list} = this.state;
        return <div className=''>
          <Input 
            value={todo} 
            onChange={this.change}
            onSubmit={this.submit}  
            />
          <List 
            data={list}
            onDel = {this.del}  
            />
        </div>;
    }
}

ReactDOM.render(<App/>,document.getElementById('root'))